<template>
    <view class="Login">
        <view class="LoginImg">
            <image src="../../static/111/u74.svg" mode=""></image>
        </view>
        <view class="LoginForm">
            <view class="LoginInput">
                <view class="Account">
                    <input class="uni-input" v-model="state.user" placeholder="登录账号" />
                    <view class="circle">
                        <u-icon name="account-fill" size="25" color="#FFF"></u-icon>
                    </view>
                </view>
                <view class="LoginPwd">
                    <input class="uni-input" v-model="state.pwd" :password="value4==true? false : true"
                        placeholder="登录密码" />
                    <view class="circle">
                        <u-icon name="lock-fill" size="25" color="#FFF"></u-icon>
                    </view>
                    <view class="Loginicon">
                        <u-switch v-model="value4" size="25" inactiveColor='#cccccc'></u-switch>
                    </view>
                    <view class="LoginDel" v-if="state.pwd.length > 0 " @click="Del">
                        <u-icon name="close-circle" color="#999999"></u-icon>
                    </view>
                </view>
            </view>
            <view class="LoginCommit">
                <button @click="Commit">登录</button>
            </view>
            <view class="LoginErr" @click="commits">
                忘记登录密码
            </view>
        </view>
    </view>
</template>

<script setup>
    import {
        reactive,
        ref
    } from 'vue'
    let value4 = ref(false)
    let state = reactive({
        user: '',
        pwd: ''
    })
    const Del = () => {
        state.pwd = ''
    }
    //登录账号、密码
    const Commit = () => {
		uni.switchTab({
		    url: '/pages/qiao-home/qiao-home',
		})
        // uni.request({
        //     url: 'http://localhost:3900/user',
        //     method: "POST",
        //     data: state,
        //     success: (res) => {
        //         console.log(res.data.code);
        //         if (res.data.code == 200) {
        //             uni.showToast({
        //                 title: res.data.msg,
        //                 duration: 2000
        //             });
        //             setTimeout(() => {
        //                 uni.switchTab({
        //                     url: '/pages/Home/Home'
        //                 })
        //             }, 2000)
        //         } else {
        //             uni.showToast({
        //                 title: res.data.msg,
        //                 duration: 2000,
        //                 icon: "error"
        //             });
        //         }
        //     }
        // })
        // if (state.user !== '' && state.pwd !== '') {
        //     if (state.user == 'admin' && state.pwd == '12345') {
        //         uni.showToast({
        //             title: '登录成功',
        //             duration: 2000
        //         });
        //         setTimeout(() => {
        //             uni.switchTab({
        //                 url: '/pages/Home/Home'
        //             })
        //         }, 2000)
        //     } else if (state.user == 'admin' && state.pwd !== '12345') {
        //         uni.showToast({
        //             title: '密码错误',
        //             duration: 2000,
        //             icon: "error"
        //         });
        //     } else if (state.user !== 'admin' && state.pwd == '12345') {
        //         uni.showToast({
        //             title: '账号错误',
        //             duration: 2000,
        //             icon: "error"
        //         });
        //     } else {
        //         uni.showToast({
        //             title: '账号密码不匹配',
        //             duration: 2000,
        //             icon: "error"
        //         });
        //     }
        // } else {
        //     uni.showToast({
        //         title: '账号或密码为空',
        //         duration: 2000,
        //         icon: "error"
        //     });
        // }
    }
    const commits = () => {
        console.log(111);
        uni.navigateTo({
            url: '/pages/Login/Resetpwd'
        })
    }
</script>

因为阅读者需要在极短的时间内掌握了解各类图表所传递的数据关系，数据可视化需要尽可能简洁，便于让不同的阅读者快速抓住其重点，因此数据可视化就需要用有限的文字、简洁的图表展现大量的数据之间的各种关系与其客观规律。


领导安排给我一个任务需要处理复杂table表格的数据、找到对应数据之间的逻辑关系，并用图表展示出复杂的数据，我通过跟同事沟通了解了数据的整个架构并查阅了相关的资料,快速找到领导所说的的数据，对数据进行了修改。

视口适配问题,开发过程中,因为屏幕的分辨率和尺寸是不一样的所以需要进行设备方面的适配，我通过使用css的flex布局和媒体查询进行了视口的检测,并实时更新数据状态。


<style scoped lang="scss">
    .Login {
        width: 100vw;
        height: 100vh;
        box-sizing: border-box;
        padding-left: 20rpx;
        padding-right: 20rpx;
        display: flex;
        flex-direction: column;

        .LoginImg {
            display: flex;
            justify-content: space-around;
        }

        .LoginForm {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            padding-left: 15rpx;
            padding-right: 15rpx;
            // background-color: blue;

            .uni-input {
                height: 100rpx;
                border: 1px solid #CCC;
                padding-left: 150rpx;
            }

            .Account,
            .LoginPwd {
                position: relative;

                .circle {
                    display: flex;
                    justify-content: space-around;
                    position: absolute;
                    top: 24%;
                    left: 55rpx;
                    width: 55rpx;
                    /* 设置元素的宽度 */
                    height: 55rpx;
                    /* 设置元素的高度 */
                    border-radius: 50%;
                    /* 将边角设置为半径相等的圆形 */
                    background-color: #cccccc;
                    /* 设置背景颜色 */
                }
            }

            .LoginPwd {

                .Loginicon {
                    position: absolute;
                    top: 24%;
                    right: 7%;
                    z-index: 11;
                }

                .LoginDel {
                    position: absolute;
                    right: 24%;
                    top: 35%;
                    z-index: 11;
                }

                .uni-input {
                    border-top: 0;
                }
            }

            .LoginSwith {
                height: 35rpx;
            }

            .LoginCommit {
                button {
                    height: 95rpx;
                    background-color: #0079fe;
                    color: #FFF;
                    font-size: 35rpx;
                }
            }

            .LoginErr {
                color: #0079fe;
                font-size: 25rpx;
                text-align: center;
            }
        }
    }
</style>